<template>
	<view class="app-dividend">
<!-- 		<view class="e-p-20 bg-white">
			<image class="app-dividend__bg" :src="$staticPath('company_did.png')" mode="heightFix"></image>
		</view>
		<view class="app-dividend__tab e-flex-xy-center">
			<text class="e-font-32 c-333">· 奖励明细 ·</text>
		</view> -->
		<scroll-view scroll-y="true" class="scroll-view-box" @scrolltolower="getData" lower-threshold="60">
			<view class="e-p-20">
				<view class="app-leaks__item bg-white e-radius-20 e-m-b-20 e-p-20" v-for="(item,index) in list" :key="item.id">
					<view class="e-flex e-font-28 c-333 e-m-b-14">
						<view class="e-flex-1">
							{{item.strategyRemark}}
						</view>
						<view class="">
							{{item.money}}
						</view>
					</view>
					<view class="e-font-24 e-flex">
						<view class="e-flex-1" style="color: #B3B3B3;">
							{{item.createTime}}
						</view>
						<view class="app-dividend__btn e-flex-xy-center" @tap="handleExt(item)" v-if="item.status === 1">
							<text class="e-font-24 c-white">兑换</text>
						</view>
					
					</view>
				</view>
				<empty :text="$t('user.暂无记录')"  :icon="$staticPath('default_img.png')" show  v-if="list.length === 0"></empty>
				<load-more v-else :showLoad="showLoad"></load-more>
			</view>
		</scroll-view>
		
		
		<e-popup :show="showPop" mode="center" round="20rpx">
			<view class="collect-box e-radius-20 bg-white e-p-20">
				<view class="e-flex-xy-center e-font-30 w-600 e-m-b-60">
					兑换奖励
				</view>
				<view class="e-p-l-44 e-p-r-44 collect-box-item e-flex c-333 e-font-32">
					<view class="e-flex-1">
						兑换奖励
					</view>
					<text>{{currentItem.money}}</text>
				</view>
				<view class="e-p-l-44 e-p-r-44 e-flex collect-box-item c-333 e-font-32">
					<view class="e-flex-1">
						需扣除
					</view>
					<text>{{currentItem.money}}{{currentItem.deductionStrategyName}}</text>
				</view>
				<view class="e-flex e-m-b-40 e-rela e-m-t-38">
					<view class="tips-box e-flex" @tap.stop="showAgreementPop = true" >
						<view class="e-abso" style="width: 100rpx;height: 40rpx;z-index: 999;">
							
						</view>
						<radio style="transform:scale(0.8)" :checked="isAgree" :color="AppSkin.primary"  />
						<text>{{ $t('public.我已阅读并同意') }}《分红协议》</text>
					</view>
				</view>
				
				<view class="e-flex-xy-center">
					<view class="e-m-r-40 e-flex-xy-center cancle-btn" @tap="showPop = false">
						<text>取消</text>
					</view>
					<view class="e-flex-xy-center submit-btn" :style="{background:AppSkin.primary,opacity:isAgree?'1':'0.5'}" @tap="handleReceive">
						<text class="c-white">确定</text>
					</view>
				</view>
			</view>
		</e-popup>
		
		<password-popup ref="passwordPopup" :show="passwordShow" @close="passwordShow = false" @confirm="passwordPay"></password-popup>
		<agreement-pop v-model="showAgreementPop" @agree="isAgree = true" @cancel="isAgree = false" :isAgree="isAgree" agreeId="25"></agreement-pop>
	</view>
</template>

<script>
	import {getDividendList,exchangeDividend,dividendExchange} from '@/common/request/api'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				showLoad: false,
				pageNum: 1,
				isGet: true,
				list: [],
				showPop:false,
				isAgree:false,
				showAgreementPop:false,
				passwordShow:false,
				currentItem:{}
			}
		},
		onShow() {
			this.getData()
		},
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo
			}),
		},
		methods:{
			handleExt(item) {
				this.currentItem = item
				if (this.userInfo.isPayword) {
					this.showPop = true
				} else {
					this.$goTo('/pages/public/setting/pay-pwd', {
						type: 1
					})
				}
			},
			handleReceive() {
				this.showPop = false
				this.passwordShow = true
			},
			passwordPay(password) {
				this.$refs.passwordPopup.password = ''
				this.passwordShow = false
				const params = {
					id:this.currentItem.id,
					payPassword:password
				}
				dividendExchange(params).then(res => {
					if (res.code == 200) {
						this.$toastApp(res.msg)
						this.$goTo('/pages/devidend/success')
					}
				})
		
			},
			getData() {
				if (this.isGet && !this.showLoad) {
					let { pageNum } = this
					let data = {
						pageNum,
						pagesSize:15
					}
					this.showLoad = true
					getDividendList(data).then(res => {
						this.showLoad = false
						if (res.code == 200) {
							let loadRes = this.$pageLoad(this.list, res.rows, pageNum, 10)
							
							this.pageNum = loadRes.pageNo
							if (this.list.length == res.total) {
								this.isGet = false
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view-box {
		height: 100vh;
	}
	@include appBem_b(dividend) {
		@include appBem_e(tab) {
			width: 100vw;
			height: 90rpx;
			background: #fff;
		}
		@include appBem_e(bg) {
			height: 258rpx;
		}
		@include appBem_e(btn) {
			width: 110rpx;
			height: 48rpx;
			background: #4B68E3;
			border-radius: 24rpx;
		}
	}
	.collect-box {
		width: 80vw;
	}
	.cancle-btn {
		padding:10rpx 30rpx;
		border:1rpx solid #ccc;
		border-radius: 90rpx;
		width:280rpx;
		height:90rpx;
	}
	.submit-btn {
		width:280rpx;
		height:90rpx;
		border-radius: 90rpx;
	}
	.collect-box-item {
		height: 120rpx;
		box-shadow: inset 0px -1px 0px 0px #EDEDED;
	}
</style>